<template>
    <div style="background: #111214;color:#fff; width: 100%;min-height: 100vh;">
      <native :title="title"></native>
      <div class="order-home">
        <div class="order-select" @click="openDown">
          <span>{{listSel[active].value}}</span>
          <img src="../assets/img/common-icon-change.svg" alt="">
        </div>
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div class="order-home-bottom" v-for="val in listData">
            <div class="order-home-flex" v-if="active == 0">
              <div style="font-size: 16px;color: #6E59FF;">
                <span style="font-family: axis;font-weight: bold;">+{{val.allComputerPower}}</span>
                <span style="font-size: 12px;float: right;">{{listSel[active].value}}</span>
              </div>
              <div style="font-size: 12px;color: rgba(255, 255, 255, .6);font-family: axis;margin-top: 8px;margin-bottom: 4px;">
                充值数量：{{val.machineNum}}
              </div>
              <div style="font-size: 12px;color: rgba(255, 255, 255, .6);font-family: axis;">
                <span>充值金额：{{val.totalPrice}} USDT</span>
                <span style="color: rgba(255, 255, 255, .3);float: right;">{{utils.dateZhuan(val.createTime)}}</span>
              </div>
            </div>
            <div class="order-home-flex" v-if="active != 0">
              <div style="font-size: 16px;color: #6E59FF;">
                <span style="font-family: axis;font-weight: bold;">+{{val.allComputerPower}}</span>
                <span style="font-size: 12px;float: right;">{{listSel[active].value}}</span>
              </div>  
              <div style="font-size: 12px;color: rgba(255, 255, 255, .6);font-family: axis;margin-top: 9px;">
                <span style="color: rgba(255, 255, 255, .3);">{{utils.dateZhuan(val.createTime)}}</span>
              </div>
            </div>
          </div>
        </van-list>
      </div>
      <div class="order-popup">
        <van-popup v-model="showPopup" closeable close-icon-position="top-left" round position="bottom" :style="{ height: '30%' }">
          <div style="position: absolute;width: 100%;text-align: center;font-size: 18px;top:17px;">选择类型</div>
          <div style="padding: 30px;margin-top: 30px;">
            <div :class="active == index?'order-popup-menu order-active':'order-popup-menu'" v-for="(val,index) in listSel" @click="suanCli(index)">
              <span>{{val.value}}</span>
              <img v-if="active == index" src="../assets/img/layer-icon-choice.svg" alt="">
            </div>
          </div>
        </van-popup>
      </div>
    </div>

  </template>

  <script>
    import { Popup,Toast,List } from 'vant'
  import native from './public/native.vue'
  export default {
    name: 'orderHistory',
    data () {
      return {
        title:'算力记录',
        active:0,
        showPopup:false,
        listSel:[
          {value:'购买算力',index:0,type:'ORDINARY'},
          {value:'分享算力',index:1,type:'SHARE'},
          {value:'站岗算力',index:2,type:'STAND'},
          {value:'创世节点算力',index:3,type:'CREATOR'},
          {value:'团队算力',index:4,type:'TEAM'},
        ],
        loading:false,
        finished: false,
        total:0,
        num:0,
        listData:[]
      }
    },  
    components:{
      native,
      [Popup.name]:Popup,
      [List.name]:List
    },
    computed: {
      
    },
    mounted() {
        
    },
    methods: {
      onLoad(){
        var that = this;
        that.num++;
        that.$http.get(that.utils.config+'/gz/machine/machine_order_recording?currentPage='+that.num+'&pageSize=10&type='+this.listSel[this.active].type).then((data)=>{
          that.total = data.data.totalSize;
          for (let i = 0; i < data.data.data.length; i++) {
              that.listData.push(data.data.data[i]);
              that.loading = false;
          }
          if (that.total == that.listData.length) {
              that.finished = true;
          }
        })
      },
      suanCli(index){
        this.num = 0;
        this.active = index;
        this.listData = [];
        this.onLoad();
      },
      openDown(){
        this.showPopup = true;
      },
    },
  }
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="less" scoped>
    .order-home{
      padding:0px 15px;
    }
    .order-home-back{
      position: relative;
      img{
        width: 100%;
        position: absolute;
        top:0px;
      }
    }
    .order-font1{
      font-size: 20px;
      text-align: center;
    }
    /* .order-home-bottom{
      padding-top: 20px;
    } */
    .order-home-flex{
      padding: 20px 0px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    .order-select{
      padding: 20px 0px;
      font-size: 16px;
    }
    .order-popup /deep/ .van-popup--bottom{
      background-color: #2F3036!important;
      height: 417px!important;
    }
    .order-popup-menu{
      position: relative;
      padding: 20px 0px;
      font-size: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      img{
        position: absolute;
        right: 0px;
      }
    }
    .order-active{
      color: #6E59FF;
    }
  </style>
